<template>
  <!-- 搜索用户，返回用户id -->
  <el-select
    v-model="selectId" filterable remote reserve-keyword :placeholder="placeholder"
    :remote-method="page" :loading="loading" default-first-option
  >
    <el-option
      v-for="item in options" :key="item.id"
      :label="(item.depart?item.depart+',':'')+(item.center?item.center+',':'')+item.cn+','+item.sn"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import {detail, page} from "@/api/system/user";

export default {
  name: "UserIdSelect",

  props: {
    value: {type: Number, default: null},
    placeholder: {type: String, default: ''}
  },

  data() {
    return {
      selectId: null,
      loading: false,
      options: [],
    }
  },

  watch: {
    value(val) {
      this.options = []
      if (val === null) {
        this.loading = false
      } else {
        detail(val).then(res => {
          this.options.push({
            id: val,
            cn: res.data.cn,
            sn: res.data.sn,
            depart: res.data.depart,
            center: res.data.center
          })
        })
      }
      this.selectId = val
    },

    selectId(val) {
      this.$emit('input', val)
    }
  },

  methods: {
    page(query) {
      const form = {
        selectSearch: query,
      }
      page(form, 0, 20).then(res => {
        this.options = res.data.records
      })
    },
  }
}
</script>

<style scoped>

</style>
